<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人账户</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .el-table thead, .el-table {
            color: black;
            border: 1px solid #A0A0A0
        }

        .spanStyle {
            white-space: nowrap; /*强制span不换行*/
            display: inline-block; /*将span当做块级元素对待*/
            width: 180px; /*限制宽度*/
            overflow: hidden; /*超出宽度部分隐藏*/
            text-overflow: ellipsis; /*超出部分以点号代替*/
            line-height: 0.9; /*数字与之前的文字对齐*/
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <el-row>
            <el-col :span="6" class="userInfo">
                <ul style="padding-top: 60px">
                    <li>
                        <a href="userInfo.html">
                            <div class="userInfo-content">
                                <i class=" glyphicon glyphicon-copy"></i>
                            </div>
                            <span>基础设置</span>
                        </a>
                    </li>
                    <li>
                        <a href="updatePassword.html">
                            <div class="userInfo-content">
                                <i class="el-icon-edit"></i>
                            </div>
                            <span>修改密码</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="account.html">
                            <div class="userInfo-content">
                                <i class="el-icon-edit"></i>
                            </div>
                            <span>个人账户</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="userInfo-content">
                                <i class="el-icon-edit"></i>
                            </div>
                            <span>系统设置</span>
                        </a>
                    </li>
                </ul>
            </el-col>
            <el-col :span="18" class="information">
                <div class="text-center">
                    <h1 style="color: #E8AE3B;font-size: 60px">￥{{money}}</h1>
                    <el-button type="warning" @click="dialogVisible = true"
                               style="font-weight: bolder;font-size: larger">充值
                    </el-button>
                </div>
                <div style="width:750px;margin: 60px auto">
                    <h2 class="text-center">---交易记录---</h2>
                    <template>
                        <el-table
                                :data="tableData"
                                border
                                :cell-style="{ borderColor: '#A0A0A0'}"
                                :header-cell-style="{ borderColor: '#A0A0A0'}"
                                style="width: 100%"
                                :default-sort="{prop: 'date', order: 'descending'}"
                        >
                            <el-table-column
                                    prop="createTime"
                                    label="日期"
                                    sortable
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="来源"
                                    sortable
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="status"
                                    label="交易类型"
                                    sortable
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="orderId"
                                    label="订单编号">
                                <template scope="scope">
                                    <el-tooltip class="item" effect="dark" :content="scope.row.orderId" placement="top">
                                        <span class="spanStyle">{{scope.row.orderId}}</span>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="fees"
                                    label="金额"
                            >
                                <template scope="scope">
                                    <span style="color: #E8AE3B" class="spanStyle">{{scope.row.fees}}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            background
                            :current-page="page.current"
                            :page-sizes="[5, 10, 20, 40]"
                            :page-size="page.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total"
                            style="margin-bottom: 30px">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
    <!--    充值模态框-->
    <el-dialog
            title="充值窗口"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form :model="add">
            <el-form-item label="充值" :label-width="120">
                <el-input v-model="add" autocomplete="off" placeholder="请输入充值的金额"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="modMoney()">确 定</el-button>
  </span>
    </el-dialog>
</div>

<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/vue-v2.6.11.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/common.js"></script>
<script src="../js/apiurls.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            money: '',
            add: '',
            dialogVisible: false,
            page: {
                //当前页
                current: 1,
                //最大页数
                total: '',
                size: 5
            },
            tableData: []
        },
        methods: {
            modMoney() {
                let that = this
                getPostData(apiUrls.account.addMoney, that.add, 'post', function (data) {
                    if (data.code === 0) {
                        that.$message({
                            message: '充值成功',
                            type: 'success'
                        });
                        that.dialogVisible = false
                        that.getMoney()
                        that.getTradingRecords()
                    } else {
                        that.$message(data.msg);
                    }
                })
            },
            getMoney() {
                let that = this
                getPostData(apiUrls.account.queryMoney, '', 'post', function (data) {
                    if (data.code === 0) {
                        that.money = data.data
                    } else {
                        that.$message(data.msg);
                    }
                })
            },
            getTradingRecords() {
                let that = this
                let data = {
                    "current": that.page.current,
                    "size": that.page.size
                }
                getPostData(apiUrls.tradingRecord.selectTradingRecord, data, 'post', function (data) {
                    if (data.code === 0) {
                        let table = data.data.records
                        table.forEach(data => {
                            if (data.status === 1) {
                                data.status = "充值"
                            }
                            if (data.status === 2) {
                                data.status = "订单付款"
                            }
                            if (data.status === 3) {
                                data.status = "订单收款"
                            }
                        })
                        that.tableData = table
                        that.page.total = data.data.total
                    } else {
                        that.$message(data.msg);
                    }
                })
            },
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.page.size = size;
                console.log(this.page.size)  //每页下拉显示数据
                this.getTradingRecords()
            },
            handleCurrentChange: function (currentPage) {
                this.page.current = currentPage;
                console.log(this.page.current)  //点击第几页
                this.getTradingRecords()
            },
        },
        created() {
            this.getMoney()
            this.getTradingRecords()
        }
    })
</script>
</body>
</html>